/**
 * Copyright (C) 2024-present Puter Technologies Inc.
 *
 * This file is part of Puter.
 *
 * Puter is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published
 * by the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 * 
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

import path from "../lib/path.js"
import UIWindowClaimReferral from "./UIWindowClaimReferral.js"
import UIContextMenu from './UIContextMenu.js'
import UIItem from './UIItem.js'
import UIAlert from './UIAlert.js'
import UIWindow from './UIWindow.js'
import UIWindowSaveAccount from './UIWindowSaveAccount.js';
import UIWindowDesktopBGSettings from "./UIWindowDesktopBGSettings.js"
import UIWindowMyWebsites from "./UIWindowMyWebsites.js"
import UIWindowFeedback from "./UIWindowFeedback.js"
import UIWindowLogin from "./UIWindowLogin.js"
import UIWindowQR from "./UIWindowQR.js"
import UIWindowRefer from "./UIWindowRefer.js"
import UIWindowProgress from "./UIWindowProgress.js"
import UITaskbar from "./UITaskbar.js"
import new_context_menu_item from "../helpers/new_context_menu_item.js"
import refresh_item_container from "../helpers/refresh_item_container.js"
import changeLanguage from "../i18n/i18nChangeLanguage.js"
import UIWindowSettings from "./Settings/UIWindowSettings.js"
import UIWindowTaskManager from "./UIWindowTaskManager.js"
import truncate_filename from '../helpers/truncate_filename.js';
import UINotification from "./UINotification.js"
import UIWindowWelcome from "./UIWindowWelcome.js"
import launch_app from "../helpers/launch_app.js"
import item_icon from "../helpers/item_icon.js"
import UIWindowSearch from "./UIWindowSearch.js"

async function UIDesktop(options) {
    // start a transaction if we're not in embedded or fullpage mode
    let transaction;
    if (!window.is_embedded && !window.is_fullpage_mode) {
        transaction = new window.Transaction('desktop-is-ready');
        transaction.start();
    }

    let h = '';

    // Set up the desktop channel for communication between different tabs in the same browser
    window.channel = new BroadcastChannel('puter-desktop-channel');
    channel.onmessage = function (e) {
    }

    // Initialize desktop icons visibility preference - move this earlier in the initialization
    // Add this near the very beginning of the UIDesktop function
    window.desktop_icons_hidden = false; // Set default value immediately

    // Initialize toolbar auto-hide preference
    window.toolbar_auto_hide_enabled = true; // Set default value

    // Load the toolbar auto-hide preference
    let toolbar_auto_hide_enabled_val = await puter.kv.get('toolbar_auto_hide_enabled');
    if(toolbar_auto_hide_enabled_val === 'false' || toolbar_auto_hide_enabled_val === false){
        window.toolbar_auto_hide_enabled = false;
    }

    // Give Camera and Recorder write permissions to Desktop
    puter.kv.get('has_set_default_app_user_permissions').then(async (user_permissions) => {
        if (!user_permissions) {
            // Camera
            try {
                await fetch(window.api_origin + "/auth/grant-user-app", {
                    "headers": {
                        "Content-Type": "application/json",
                        "Authorization": "Bearer " + window.auth_token,
                    },
                    "body": JSON.stringify({
                        app_uid: 'app-5584fbf7-ed69-41fc-99cd-85da21b1ef51',
                        permission: `fs:${html_encode(window.desktop_path)}:write`
                    }),
                    "method": "POST",
                });
            } catch (err) {
                console.error(err);
            }

            // Recorder
            try {
                await fetch(window.api_origin + "/auth/grant-user-app", {
                    "headers": {
                        "Content-Type": "application/json",
                        "Authorization": "Bearer " + window.auth_token,
                    },
                    "body": JSON.stringify({
                        app_uid: 'app-7bdca1a4-6373-4c98-ad97-03ff2d608ca1',
                        permission: `fs:${html_encode(window.desktop_path)}:write`
                    }),
                    "method": "POST",
                });
            } catch (err) {
                console.error(err);
            }

            // Set flag to true
            puter.kv.set('has_set_default_app_user_permissions', true);
        }
    })
    // connect socket.
    window.socket = io(window.gui_origin + '/', {
        auth: {
            auth_token: window.auth_token
        }
    });

    window.socket.on('error', (error) => {
        console.error('GUI Socket Error:', error);
    });

    window.socket.on('connect', function () {
        // console.log('GUI Socket: Connected', window.socket.id);
        window.socket.emit('puter_is_actually_open');
    });

    window.socket.on('reconnect', function () {
        console.log('GUI Socket: Reconnected', window.socket.id);
    });

    window.socket.on('disconnect', () => {
        console.log('GUI Socket: Disconnected');
    });

    window.socket.on('reconnect', (attempt) => {
        console.log('GUI Socket: Reconnection', attempt);
    });

    window.socket.on('reconnect_attempt', (attempt) => {
        console.log('GUI Socket: Reconnection Attemps', attempt);
    });

    window.socket.on('reconnect_error', (error) => {
        console.log('GUI Socket: Reconnection Error', error);
    });

    window.socket.on('reconnect_failed', () => {
        console.log('GUI Socket: Reconnection Failed');
    });

    window.socket.on('error', (error) => {
        console.error('GUI Socket Error:', error);
    });

    window.socket.on('upload.progress', (msg) => {
        if (window.progress_tracker[msg.operation_id]) {
            window.progress_tracker[msg.operation_id].cloud_uploaded += msg.loaded_diff
            if (window.progress_tracker[msg.operation_id][msg.item_upload_id]) {
                window.progress_tracker[msg.operation_id][msg.item_upload_id].cloud_uploaded = msg.loaded;
            }
        }
    });

    window.socket.on('download.progress', (msg) => {
        if (window.progress_tracker[msg.operation_id]) {
            if (window.progress_tracker[msg.operation_id][msg.item_upload_id]) {
                window.progress_tracker[msg.operation_id][msg.item_upload_id].downloaded = msg.loaded;
                window.progress_tracker[msg.operation_id][msg.item_upload_id].total = msg.total;
            }
        }
    });

    window.socket.on('trash.is_empty', async (msg) => {
        $(`.item[data-path="${html_encode(window.trash_path)}" i]`).find('.item-icon > img').attr('src', msg.is_empty ? window.icons['trash.svg'] : window.icons['trash-full.svg']);
        $(`.window[data-path="${html_encode(window.trash_path)}" i]`).find('.window-head-icon').attr('src', msg.is_empty ? window.icons['trash.svg'] : window.icons['trash-full.svg']);
        // empty trash windows if needed
        if (msg.is_empty)
            $(`.window[data-path="${html_encode(window.trash_path)}" i]`).find('.item-container').empty();
    })

    /**
     * This event is triggered if a user receives a notification during
     * an active session.
     */
    window.socket.on('notif.message', async ({ uid, notification }) => {
        let icon = window.icons[notification.icon];
        let round_icon = false;

        if (notification.template === "file-shared-with-you" && notification.fields?.username) {
            let profile_pic = await get_profile_picture(notification.fields?.username);
            if (profile_pic) {
                icon = profile_pic;
                round_icon = true;
            }
        }

        UINotification({
            title: notification.title,
            text: notification.text,
            icon: icon,
            round_icon: round_icon,
            value: notification,
            uid,
            close: async () => {
                await fetch(`${window.api_origin}/notif/mark-ack`, {
                    method: 'POST',
                    headers: {
                        Authorization: `Bearer ${puter.authToken}`,
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ uid }),
                });
            },
            click: async (notif) => {
                if (notification.template === "file-shared-with-you") {
                    let item_path = '/' + notification.fields.username;
                    UIWindow({
                        path: '/' + notification.fields.username,
                        title: path.basename(item_path),
                        icon: await item_icon({ is_dir: true, path: item_path }),
                        is_dir: true,
                        app: 'explorer',
                    });
                }
            },
        });
    });

    /**
     * This event is triggered at the beginning of the session, after a websocket
     * connection is established, because the backend informs the frontend of all
     * unread notifications.
     * 
     * It is not necessary to query unreads separately. If this stops working,
     * then this event should be fixed rather than querying unreads separately.
     */
    window.__already_got_unreads = false;
    window.socket.on('notif.unreads', async ({ unreads }) => {
        if (window.__already_got_unreads) return;
        window.__already_got_unreads = true;

        for (const notif_info of unreads) {
            const notification = notif_info.notification;
            let icon = window.icons[notification.icon];
            let round_icon = false;

            if (notification.template === "file-shared-with-you" && notification.fields?.username) {
                let profile_pic = await get_profile_picture(notification.fields?.username);
                if (profile_pic) {
                    icon = profile_pic;
                    round_icon = true;
                }
            }

            UINotification({
                icon,
                round_icon,
                title: notification.title,
                text: notification.text ?? notification.title,
                uid: notif_info.uid,
                close: async () => {
                    await fetch(`${window.api_origin}/notif/mark-ack`, {
                        method: 'POST',
                        headers: {
                            Authorization: `Bearer ${puter.authToken}`,
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            uid: notif_info.uid,
                        }),
                    });
                },
                click: async (notif) => {
                    if (notification.template === "file-shared-with-you") {
                        let item_path = '/' + notification.fields?.username;
                        UIWindow({
                            path: '/' + notification.fields?.username,
                            title: path.basename(item_path),
                            icon: await item_icon({ is_dir: true, path: item_path }),
                            is_dir: true,
                            app: 'explorer',
                        });
                    }
                },
            });
        }
    });

    window.socket.on('notif.ack', ({ uid }) => {
        $(`.notification[data-uid="${uid}"]`).remove();
        update_tab_notif_count_badge();
    });

    window.socket.on('app.opened', async (app) => {
        // don't update if this is the original client that initiated the action
        if (app.original_client_socket_id === window.socket.id)
            return;

        // add the app to the beginning of the array
        window.launch_apps.recent.unshift(app);

        // dedupe the array by uuid, uid, and id
        window.launch_apps.recent = _.uniqBy(window.launch_apps.recent, 'name');

        // limit to 5
        window.launch_apps.recent = window.launch_apps.recent.slice(0, window.launch_recent_apps_count);
    })

    window.socket.on('item.removed', async (item) => {
        // don't update if this is the original client that initiated the action
        if (item.original_client_socket_id === window.socket.id)
            return;

        // don't remove items if this was a descendants_only operation
        if (item.descendants_only)
            return;

        // hide all UIItems with matching uids 
        $(`.item[data-path='${item.path}']`).fadeOut(150, function () {
            // close all windows with matching uids
            // $('.window-' + item.uid).close();
            // close all windows that belong to a descendant of this item
            // todo this has to be case-insensitive but the `i` selector doesn't work on ^=
            $(`.window[data-path^="${item.path}/"]`).close();
        });
    })

    window.socket.on('item.updated', async (item) => {
        // Don't update if this is the original client that initiated the action
        if (item.original_client_socket_id === window.socket.id)
            return;

        // Update matching items
        // set new item name
        $(`.item[data-uid='${html_encode(item.uid)}'] .item-name`).html(html_encode(truncate_filename(item.name)));

        // Set new icon
        const new_icon = (item.is_dir ? window.icons['folder.svg'] : (await item_icon(item)).image);
        $(`.item[data-uid='${item.uid}']`).find('.item-icon-thumb').attr('src', new_icon);
        $(`.item[data-uid='${item.uid}']`).find('.item-icon-icon').attr('src', new_icon);

        // Set new data-name
        $(`.item[data-uid='${item.uid}']`).attr('data-name', html_encode(item.name));
        $(`.window-${item.uid}`).attr('data-name', html_encode(item.name));

        // Set new title attribute
        $(`.item[data-uid='${item.uid}']`).attr('title', html_encode(item.name));
        $(`.window-${options.uid}`).attr('title', html_encode(item.name));

        // Set new value for item-name-editor
        $(`.item[data-uid='${item.uid}'] .item-name-editor`).val(html_encode(item.name));
        $(`.item[data-uid='${item.uid}'] .item-name`).attr('title', html_encode(item.name));

        // Set new data-path
        const new_path = item.path;
        $(`.item[data-uid='${item.uid}']`).attr('data-path', new_path);
        $(`.window-${item.uid}`).attr('data-path', new_path);

        // Update all elements that have matching paths
        $(`[data-path="${html_encode(item.old_path)}" i]`).each(function () {
            $(this).attr('data-path', new_path)
            if ($(this).hasClass('window-navbar-path-dirname'))
                $(this).text(item.name);
        });

        // Update all elements whose paths start with old_path
        $(`[data-path^="${html_encode(item.old_path) + '/'}"]`).each(function () {
            const new_el_path = _.replace($(this).attr('data-path'), item.old_path + '/', new_path + '/');
            $(this).attr('data-path', new_el_path);
        });

        // Update all exact-matching windows
        $(`.window-${item.uid}`).each(function () {
            window.update_window_path(this, new_path);
        })
        // Set new name for matching open windows
        $(`.window-${item.uid} .window-head-title`).text(item.name);

        // Re-sort all matching item containers
        $(`.item[data-uid='${item.uid}']`).parent('.item-container').each(function () {
            window.sort_items(this, $(this).closest('.item-container').attr('data-sort_by'), $(this).closest('.item-container').attr('data-sort_order'));
        })
    })

    window.socket.on('item.moved', async (resp) => {
        let fsentry = resp;
        // Notify all apps that are watching this item
        window.sendItemChangeEventToWatchingApps(fsentry.uid, {
            event: 'moved',
            uid: fsentry.uid,
            name: fsentry.name,
        })

        // don't update if this is the original client that initiated the action
        if (resp.original_client_socket_id === window.socket.id)
            return;

        let dest_path = path.dirname(fsentry.path);
        let metadata = fsentry.metadata;

        // update all shortcut_to_path
        $(`.item[data-shortcut_to_path="${html_encode(resp.old_path)}" i]`).attr(`data-shortcut_to_path`, html_encode(fsentry.path));

        // remove all items with matching uids
        $(`.item[data-uid='${fsentry.uid}']`).fadeOut(150, function () {
            // find all parent windows that contain this item
            let parent_windows = $(`.item[data-uid='${fsentry.uid}']`).closest('.window');
            // remove this item
            $(this).removeItems();
            // update parent windows' item counts
            $(parent_windows).each(function (index) {
                window.update_explorer_footer_item_count(this);
                window.update_explorer_footer_selected_items_count(this)
            });
        })

        // if trashing, close windows of trashed items and its descendants
        if (dest_path === window.trash_path) {
            $(`.window[data-path="${html_encode(resp.old_path)}" i]`).close();
            // todo this has to be case-insensitive but the `i` selector doesn't work on ^=
            $(`.window[data-path^="${html_encode(resp.old_path)}/"]`).close();
        }

        // update all paths of its and its descendants' open windows
        else {
            // todo this has to be case-insensitive but the `i` selector doesn't work on ^=
            $(`.window[data-path^="${html_encode(resp.old_path)}/"], .window[data-path="${html_encode(resp.old_path)}" i]`).each(function () {
                window.update_window_path(this, $(this).attr('data-path').replace(resp.old_path, fsentry.path));
            })
        }

        if (dest_path === window.trash_path) {
            $(`.item[data-uid="${fsentry.uid}"]`).find('.item-is-shared').fadeOut(300);

            // if trashing dir... 
            if (fsentry.is_dir) {
                // remove website badge
                $(`.mywebsites-dir-path[data-uuid="${fsentry.uid}"]`).remove();
                // remove the website badge from all instances of the dir
                $(`.item[data-uid="${fsentry.uid}"]`).find('.item-has-website-badge').fadeOut(300);

                // remove File Rrequest Token
                // todo, some client-side check to see if this dir has an FR associated with it before sending a whole ajax req
            }
        }
        // if replacing an existing item, remove the old item that was just replaced
        if (fsentry.overwritten_uid !== undefined)
            $(`.item[data-uid=${fsentry.overwritten_uid}]`).removeItems();

        // if this is trash, get original name from item metadata
        fsentry.name = (metadata && metadata.original_name) ? metadata.original_name : fsentry.name;

        // create new item on matching containers
        UIItem({
            appendTo: $(`.item-container[data-path='${html_encode(dest_path)}' i]`),
            immutable: fsentry.immutable || fsentry.writable === false,
            uid: fsentry.uid,
            path: fsentry.path,
            icon: await item_icon(fsentry),
            name: (dest_path === window.trash_path) ? metadata.original_name : fsentry.name,
            is_dir: fsentry.is_dir,
            size: fsentry.size,
            type: fsentry.type,
            modified: fsentry.modified,
            is_selected: false,
            is_shared: (dest_path === window.trash_path) ? false : fsentry.is_shared,
            is_shortcut: fsentry.is_shortcut,
            shortcut_to: fsentry.shortcut_to,
            shortcut_to_path: fsentry.shortcut_to_path,
            // has_website: $(el_item).attr('data-has_website') === '1',
            metadata: JSON.stringify(fsentry.metadata) ?? '',
        });

        if (fsentry.parent_dirs_created && fsentry.parent_dirs_created.length > 0) {
            // this operation may have created some missing directories, 
            // see if any of the directories in the path of this file is new AND
            // if these new path have any open parents that need to be updated

            fsentry.parent_dirs_created.forEach(async dir => {
                let item_container = $(`.item-container[data-path='${html_encode(path.dirname(dir.path))}' i]`);
                if (item_container.length > 0 && $(`.item[data-path="${html_encode(dir.path)}" i]`).length === 0) {
                    UIItem({
                        appendTo: item_container,
                        immutable: false,
                        uid: dir.uid,
                        path: dir.path,
                        icon: await item_icon(dir),
                        name: dir.name,
                        size: dir.size,
                        type: dir.type,
                        modified: dir.modified,
                        is_dir: true,
                        is_selected: false,
                        is_shared: dir.is_shared,
                        has_website: false,
                    });
                }
                window.sort_items(item_container, $(item_container).attr('data-sort_by'), $(item_container).attr('data-sort_order'));
            });
        }
        //sort each container
        $(`.item-container[data-path='${html_encode(dest_path)}' i]`).each(function () {
            window.sort_items(this, $(this).attr('data-sort_by'), $(this).attr('data-sort_order'))
        })
    });

    window.socket.on('user.email_confirmed', (msg) => {
        // don't update if this is the original client that initiated the action
        if (msg.original_client_socket_id === window.socket.id)
            return;

        window.refresh_user_data(window.auth_token);
    });

    window.socket.on('user.email_changed', (msg) => {
        // don't update if this is the original client that initiated the action
        if (msg.original_client_socket_id === window.socket.id)
            return;

        window.refresh_user_data(window.auth_token);
    });

    window.socket.on('item.renamed', async (item) => {
        // Notify all apps that are watching this item
        window.sendItemChangeEventToWatchingApps(item.uid, {
            event: 'rename',
            uid: item.uid,
            // path: item.path,
            new_name: item.name,
            // old_path: item.old_path,
        })

        // Don't update if this is the original client that initiated the action
        if (item.original_client_socket_id === window.socket.id)
            return;

        // Update matching items
        // Set new item name
        $(`.item[data-uid='${html_encode(item.uid)}'] .item-name`).html(html_encode(truncate_filename(item.name)));

        // Set new icon
        const new_icon = (item.is_dir ? window.icons['folder.svg'] : (await item_icon(item)).image);
        $(`.item[data-uid='${item.uid}']`).find('.item-icon-icon').attr('src', new_icon);

        // Set new data-name
        $(`.item[data-uid='${item.uid}']`).attr('data-name', html_encode(item.name));
        $(`.window-${item.uid}`).attr('data-name', html_encode(item.name));

        // Set new title attribute
        $(`.item[data-uid='${item.uid}']`).attr('title', html_encode(item.name));
        $(`.window-${options.uid}`).attr('title', html_encode(item.name));

        // Set new value for item-name-editor
        $(`.item[data-uid='${item.uid}'] .item-name-editor`).val(html_encode(item.name));
        $(`.item[data-uid='${item.uid}'] .item-name`).attr('title', html_encode(item.name));

        // Set new data-path
        const new_path = item.path;
        $(`.item[data-uid='${item.uid}']`).attr('data-path', new_path);
        $(`.window-${item.uid}`).attr('data-path', new_path);

        // Update all elements that have matching paths
        $(`[data-path="${html_encode(item.old_path)}" i]`).each(function () {
            $(this).attr('data-path', new_path)
            if ($(this).hasClass('window-navbar-path-dirname'))
                $(this).text(item.name);
        });

        // Update all elements whose paths start with old_path
        $(`[data-path^="${html_encode(item.old_path) + '/'}"]`).each(function () {
            const new_el_path = _.replace($(this).attr('data-path'), item.old_path + '/', new_path + '/');
            $(this).attr('data-path', new_el_path);
        });

        // Update all exact-matching windows
        $(`.window-${item.uid}`).each(function () {
            window.update_window_path(this, new_path);
        })
        // Set new name for matching open windows
        $(`.window-${item.uid} .window-head-title`).text(item.name);

        // Re-sort all matching item containers
        $(`.item[data-uid='${item.uid}']`).parent('.item-container').each(function () {
            window.sort_items(this, $(this).closest('.item-container').attr('data-sort_by'), $(this).closest('.item-container').attr('data-sort_order'));
        })
    });

    window.socket.on('item.added', async (item) => {
        // if item is empty, don't proceed
        if (_.isEmpty(item))
            return;

        // Notify all apps that are watching this item
        window.sendItemChangeEventToWatchingApps(item.uid, {
            event: 'write',
            uid: item.uid,
            // path: item.path,
            new_size: item.size,
            modified: item.modified,
            // old_path: item.old_path,
        });

        // Don't update if this is the original client that initiated the action
        if (item.original_client_socket_id === window.socket.id)
            return;

        // Update replaced items with matching uids
        if (item.overwritten_uid) {
            $(`.item[data-uid='${item.overwritten_uid}']`).attr({
                'data-immutable': item.immutable,
                'data-path': item.path,
                'data-name': item.name,
                'data-size': item.size,
                'data-modified': item.modified,
                'data-is_shared': item.is_shared,
                'data-type': item.type,
            })
            // set new icon
            const new_icon = (item.is_dir ? window.icons['folder.svg'] : (await item_icon(item)).image);
            $(`.item[data-uid="${item.overwritten_uid}"]`).find('.item-icon > img').attr('src', new_icon);

            //sort each window
            $(`.item-container[data-path='${html_encode(item.dirpath)}' i]`).each(function () {
                window.sort_items(this, $(this).attr('data-sort_by'), $(this).attr('data-sort_order'))
            })
        }
        else {
            UIItem({
                appendTo: $(`.item-container[data-path='${html_encode(item.dirpath)}' i]`),
                uid: item.uid,
                immutable: item.immutable || item.writable === false,
                associated_app_name: item.associated_app?.name,
                path: item.path,
                icon: await item_icon(item),
                name: item.name,
                size: item.size,
                type: item.type,
                modified: item.modified,
                is_dir: item.is_dir,
                is_shared: item.is_shared,
                is_shortcut: item.is_shortcut,
                shortcut_to: item.shortcut_to,
                shortcut_to_path: item.shortcut_to_path,
            });

            //sort each window
            $(`.item-container[data-path='${html_encode(item.dirpath)}' i]`).each(function () {
                window.sort_items(this, $(this).attr('data-sort_by'), $(this).attr('data-sort_order'))
            })
        }
    });

    // Hidden file dialog
    h += `<form name="upload-form" id="upload-form" style="display:hidden;">
            <input type="hidden" name="name" id="upload-filename" value="">
            <input type="hidden" name="path" id="upload-target-path" value="">
            <input type="file" name="file" id="upload-file-dialog" style="display: none;" multiple="multiple">
        </form>`;

    h += `<div class="window-container"></div>`;

    // Desktop
    // If desktop is not in fullpage/embedded mode, we hide it until files and directories are loaded and then fade in the UI
    // This gives a calm and smooth experience for the user
    h += `<div class="desktop item-container disable-user-select" 
                data-uid="${options.desktop_fsentry.uid}" 
                data-sort_by="${!options.desktop_fsentry.sort_by ? 'name' : options.desktop_fsentry.sort_by}" 
                data-sort_order="${!options.desktop_fsentry.sort_order ? 'asc' : options.desktop_fsentry.sort_order}" 
                data-path="${html_encode(window.desktop_path)}"
            >`;

            // show AI button
            if(window.user.email_confirmed){
                h += `<div class="btn-show-ai"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles-icon lucide-sparkles"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/><path d="M20 2v4"/><path d="M22 4h-4"/><circle cx="4" cy="20" r="2"/></svg></div>`;
            }
    h += `</div>`;

    // Get window sidebar width
    puter.kv.get('window_sidebar_width').then(async (val) => {
        let value = parseInt(val);
        // if value is a valid number
        if (!isNaN(value) && value > 0) {
            window.window_sidebar_width = value;
        }
    })

    // load window sidebar items from KV
    puter.kv.get("sidebar_items").then(async (val) => {
        window.sidebar_items = val;
    })

    // Remove `?ref=...` from navbar URL
    if (window.url_query_params.has('ref')) {
        window.history.pushState(null, document.title, '/');
    }

    // update local user preferences
    const user_preferences = {
        show_hidden_files: JSON.parse(await puter.kv.get('user_preferences.show_hidden_files')),
        language: await puter.kv.get('user_preferences.language'),
        clock_visible: await puter.kv.get('user_preferences.clock_visible'),
    };

    // update default apps
    {
        const entries = await puter.kv.list('user_preferences.default_apps.*', true);
        for ( const entry of entries ) {
            user_preferences[entry.key.substring(17)] = entry.value;
        }

        window.update_user_preferences(user_preferences);
    }

    // Append to <body>
    $('body').append(h);

    // Set desktop height based on taskbar height
    $('.desktop').css('height', `calc(100vh - ${window.taskbar_height + window.toolbar_height}px)`)

    // Initialize the preference early
    puter.kv.get('desktop_icons_hidden').then(async (val) => {
        window.desktop_icons_hidden = (val === 'true' || val === true);

        // Apply the setting immediately if needed
        if (window.desktop_icons_hidden) {
            hideDesktopIcons();
        }
    });

    // ---------------------------------------------------------------
    // Taskbar
    // ---------------------------------------------------------------
    UITaskbar();

    // Update desktop dimensions after taskbar is initialized with position
    window.update_desktop_dimensions_for_taskbar();

    const el_desktop = document.querySelector('.desktop');

    window.active_element = el_desktop;
    window.active_item_container = el_desktop;

    // --------------------------------------------------------
    // Dragster
    // Allow dragging of local files onto desktop.
    // --------------------------------------------------------
    $(el_desktop).dragster({
        enter: function (dragsterEvent, event) {
            $('.context-menu').remove();
        },
        leave: function (dragsterEvent, event) {
        },
        drop: async function (dragsterEvent, event) {
            const e = event.originalEvent;
            // no drop on item
            if ($(event.target).hasClass('item') || $(event.target).parent('.item').length > 0)
                return false;
            // recursively create directories and upload files
            if (e.dataTransfer?.items?.length > 0) {
                window.upload_items(e.dataTransfer.items, window.desktop_path);
            }

            e.stopPropagation();
            e.preventDefault();
            return false;
        }
    });

    // --------------------------------------------------------
    // Droppable
    // --------------------------------------------------------
    $(el_desktop).droppable({
        accept: '.item',
        tolerance: "intersect",
        drop: function (event, ui) {
            // Check if item was actually dropped on desktop and not a window
            if (window.mouseover_window !== undefined)
                return;

            // Can't drop anything but UIItems on desktop
            if (!$(ui.draggable).hasClass('item'))
                return;

            // Don't move an item to its current directory
            if (path.dirname($(ui.draggable).attr('data-path')) === window.desktop_path && !event.ctrlKey)
                return;

            // If ctrl is pressed and source is Trashed, cancel whole operation
            if (event.ctrlKey && path.dirname($(ui.draggable).attr('data-path')) === window.trash_path)
                return;

            // Unselect previously selected items
            $(el_desktop).children('.item-selected').removeClass('item-selected');

            const items_to_move = []
            // first item
            items_to_move.push(ui.draggable);

            // all subsequent items
            const cloned_items = document.getElementsByClassName('item-selected-clone');
            for (let i = 0; i < cloned_items.length; i++) {
                const source_item = document.getElementById('item-' + $(cloned_items[i]).attr('data-id'));
                if (source_item !== null)
                    items_to_move.push(source_item);
            }

            // if ctrl key is down, copy items
            if (event.ctrlKey) {
                // unless source is Trash
                if (path.dirname($(ui.draggable).attr('data-path')) === window.trash_path)
                    return;

                window.copy_items(items_to_move, window.desktop_path)
            }
            // otherwise, move items
            else {
                window.move_items(items_to_move, window.desktop_path);
            }
        }
    });

    //--------------------------------------------------
    // ContextMenu
    //--------------------------------------------------
    $(el_desktop).bind("contextmenu taphold", function (event) {
        // dismiss taphold on regular devices
        if (event.type === 'taphold' && !isMobile.phone && !isMobile.tablet)
            return;

        const $target = $(event.target);

        // elements that should retain native ctxmenu
        if ($target.is('input') || $target.is('textarea'))
            return true

        // custom ctxmenu for all other elements
        if (event.target === el_desktop) {
            event.preventDefault();
            UIContextMenu({
                position: event.type === 'taphold' ? undefined : { left: event.pageX, top: event.pageY },
                items: [
                    // -------------------------------------------
                    // Sort by
                    // -------------------------------------------
                    {
                        html: i18n('sort_by'),
                        items: [
                            {
                                html: i18n('auto_arrange'),
                                icon: window.is_auto_arrange_enabled ? '✓' : '',
                                onClick: async function () {
                                    window.is_auto_arrange_enabled = !window.is_auto_arrange_enabled;
                                    window.store_auto_arrange_preference(window.is_auto_arrange_enabled);
                                    if (window.is_auto_arrange_enabled) {
                                        window.sort_items(el_desktop, $(el_desktop).attr('data-sort_by'), $(el_desktop).attr('data-sort_order'));
                                        window.set_sort_by(options.desktop_fsentry.uid, $(el_desktop).attr('data-sort_by'), $(el_desktop).attr('data-sort_order'))
                                        window.clear_desktop_item_positions(el_desktop);
                                    } else {
                                        window.set_desktop_item_positions(el_desktop)
                                    }
                                }
                            },
                            // -------------------------------------------
                            // -
                            // -------------------------------------------
                            '-',
                            {
                                html: i18n('name'),
                                disabled: !window.is_auto_arrange_enabled,
                                icon: $(el_desktop).attr('data-sort_by') === 'name' ? '✓' : '',
                                onClick: async function () {
                                    window.sort_items(el_desktop, 'name', $(el_desktop).attr('data-sort_order'));
                                    window.set_sort_by(options.desktop_fsentry.uid, 'name', $(el_desktop).attr('data-sort_order'))
                                }
                            },
                            {
                                html: i18n('date_modified'),
                                disabled: !window.is_auto_arrange_enabled,
                                icon: $(el_desktop).attr('data-sort_by') === 'modified' ? '✓' : '',
                                onClick: async function () {
                                    window.sort_items(el_desktop, 'modified', $(el_desktop).attr('data-sort_order'));
                                    window.set_sort_by(options.desktop_fsentry.uid, 'modified', $(el_desktop).attr('data-sort_order'))
                                }
                            },
                            {
                                html: i18n('type'),
                                disabled: !window.is_auto_arrange_enabled,
                                icon: $(el_desktop).attr('data-sort_by') === 'type' ? '✓' : '',
                                onClick: async function () {
                                    window.sort_items(el_desktop, 'type', $(el_desktop).attr('data-sort_order'));
                                    window.set_sort_by(options.desktop_fsentry.uid, 'type', $(el_desktop).attr('data-sort_order'))
                                }
                            },
                            {
                                html: i18n('size'),
                                disabled: !window.is_auto_arrange_enabled,
                                icon: $(el_desktop).attr('data-sort_by') === 'size' ? '✓' : '',
                                onClick: async function () {
                                    window.sort_items(el_desktop, 'size', $(el_desktop).attr('data-sort_order'));
                                    window.set_sort_by(options.desktop_fsentry.uid, 'size', $(el_desktop).attr('data-sort_order'))
                                }
                            },
                            // -------------------------------------------
                            // -
                            // -------------------------------------------
                            '-',
                            {
                                html: i18n('ascending'),
                                disabled: !window.is_auto_arrange_enabled,
                                icon: $(el_desktop).attr('data-sort_order') === 'asc' ? '✓' : '',
                                onClick: async function () {
                                    const sort_by = $(el_desktop).attr('data-sort_by')
                                    window.sort_items(el_desktop, sort_by, 'asc');
                                    window.set_sort_by(options.desktop_fsentry.uid, sort_by, 'asc')
                                }
                            },
                            {
                                html: i18n('descending'),
                                disabled: !window.is_auto_arrange_enabled,
                                icon: $(el_desktop).attr('data-sort_order') === 'desc' ? '✓' : '',
                                onClick: async function () {
                                    const sort_by = $(el_desktop).attr('data-sort_by')
                                    window.sort_items(el_desktop, sort_by, 'desc');
                                    window.set_sort_by(options.desktop_fsentry.uid, sort_by, 'desc')
                                }
                            },
                        ]
                    },
                    // -------------------------------------------
                    // Refresh
                    // -------------------------------------------
                    {
                        html: i18n('refresh'),
                        onClick: function () {
                            refresh_item_container(el_desktop, { consistency: 'strong' });
                        }
                    },
                    // -------------------------------------------
                    // Show/Hide hidden files
                    // -------------------------------------------
                    {
                        html: i18n('show_hidden'),
                        icon: window.user_preferences.show_hidden_files ? '✓' : '',
                        onClick: function () {
                            window.mutate_user_preferences({
                                show_hidden_files: !window.user_preferences.show_hidden_files,
                            });
                            window.show_or_hide_files(document.querySelectorAll('.item-container'));
                        }
                    },
                    // -------------------------------------------
                    // Hide Desktop Icons
                    // -------------------------------------------
                    {
                        html: window.desktop_icons_hidden ? i18n('Show desktop icons') : i18n('Hide desktop icons'),
                        onClick: function () {
                            toggleDesktopIcons();
                        }
                    },
                    // -------------------------------------------
                    // -
                    // -------------------------------------------
                    '-',
                    // -------------------------------------------
                    // New File
                    // -------------------------------------------
                    new_context_menu_item(window.desktop_path, el_desktop),
                    // -------------------------------------------
                    // -
                    // -------------------------------------------
                    '-',
                    // -------------------------------------------
                    // Paste
                    // -------------------------------------------
                    {
                        html: i18n('paste'),
                        disabled: window.clipboard.length > 0 ? false : true,
                        onClick: function () {
                            if (window.clipboard_op === 'copy')
                                window.copy_clipboard_items(window.desktop_path, el_desktop);
                            else if (window.clipboard_op === 'move')
                                window.move_clipboard_items(el_desktop)
                        }
                    },
                    // -------------------------------------------
                    // Undo
                    // -------------------------------------------
                    {
                        html: i18n('undo'),
                        disabled: window.actions_history.length > 0 ? false : true,
                        onClick: function () {
                            window.undo_last_action();
                        }
                    },
                    // -------------------------------------------
                    // Upload Here
                    // -------------------------------------------
                    {
                        html: i18n('upload_here'),
                        onClick: function () {
                            window.init_upload_using_dialog(el_desktop);
                        }
                    },
                    // -------------------------------------------
                    // -
                    // -------------------------------------------
                    '-',
                    // -------------------------------------------
                    // Change Desktop Background…
                    // -------------------------------------------
                    {
                        html: i18n('change_desktop_background'),
                        onClick: function () {
                            UIWindowDesktopBGSettings();
                        }
                    },

                ]
            });
        }
    });

    //-------------------------------------------
    // Desktop Files/Folders
    // we don't need to get the desktop items if we're in embedded or fullpage mode
    // because the items aren't visible anyway and we don't need to waste bandwidth/server resources
    //-------------------------------------------
    if (!window.is_embedded && !window.is_fullpage_mode) {
        refresh_item_container(el_desktop, { 
            fadeInItems: true,
            onComplete: () => {
                // End transaction when desktop is fully ready for user interaction
                transaction.end();
            }
        })

        // perform readdirs for caching purposes

        // home directory
        puter.fs.readdir({path: window.home_path, consistency: 'strong'});

        // Show welcome window if user hasn't already seen it and hasn't directly navigated to an app 
        if (!window.url_paths[0]?.toLocaleLowerCase() === 'app' || !window.url_paths[1]) {
            if (!isMobile.phone && !isMobile.tablet) {
                setTimeout(() => {
                    puter.kv.get('has_seen_welcome_window').then(async (val) => {
                        if (val === null) {
                            await UIWindowWelcome();
                        }
                    })
                }, 1000);
            }
        }
    }

    // -------------------------------------------
    // Selectable
    // Only for desktop
    // -------------------------------------------
    if (!isMobile.phone && !isMobile.tablet) {
        let selected_ctrl_items = [];
        const selection = new SelectionArea({
            selectionContainerClass: '.selection-area-container',
            container: '.desktop',
            selectables: ['.desktop.item-container > .item'],
            startareas: ['.desktop'],
            boundaries: ['.desktop'],
            behaviour: {
                overlap: 'drop',
                intersect: 'touch',
                startThreshold: 10,
                scrolling: {
                    speedDivider: 10,
                    manualSpeed: 750,
                    startScrollMargins: { x: 0, y: 0 }
                }
            },
            features: {
                touch: true,
                range: true,
                singleTap: {
                    allow: true,
                    intersect: 'native'
                }
            }
        });

        selection.on('beforestart', ({ event }) => {
            selected_ctrl_items = [];
            // Returning false prevents a selection
            return $(event.target).hasClass('item-container');
        })
            .on('beforedrag', evt => {
            })
            .on('start', ({ store, event }) => {
                if (!event.ctrlKey && !event.metaKey) {
                    for (const el of store.stored) {
                        el.classList.remove('item-selected');
                    }

                    selection.clearSelection();
                }

                // mark desktop as selectable active
                $('.desktop').addClass('desktop-selectable-active');
            })
            .on('move', ({ store: { changed: { added, removed } }, event }) => {
                window.desktop_selectable_is_active = true;

                for (const el of added) {
                    // if ctrl or meta key is pressed and the item is already selected, then unselect it
                    if ((event.ctrlKey || event.metaKey) && $(el).hasClass('item-selected')) {
                        el.classList.remove('item-selected');
                        selected_ctrl_items.push(el);
                    }
                    // otherwise select it
                    else {
                        el.classList.add('item-selected');
                    }
                }

                for (const el of removed) {
                    el.classList.remove('item-selected');
                    // in case this item was selected by ctrl+click before, then reselect it again
                    if (selected_ctrl_items.includes(el))
                        $(el).not('.item-disabled').addClass('item-selected');
                }
            })
            .on('stop', evt => {
                window.desktop_selectable_is_active = false;
                $('.desktop').removeClass('desktop-selectable-active');
            });
    }
    // ----------------------------------------------------
    // Toolbar
    // ----------------------------------------------------
    // Has user seen the toolbar animation?
    window.has_seen_toolbar_animation = await puter.kv.get('has_seen_toolbar_animation') ?? false;
    
    let ht = '';
    let style = '';
    let class_name = '';
    if(window.has_seen_toolbar_animation && !isMobile.phone && !isMobile.tablet){
        style = 'top: -20px; width: 40px;';
        class_name = 'toolbar-hidden';
    }else{
        style= 'height:30px; min-height:30px; max-height:30px;';
    }

    ht += `<div class="toolbar hide-scrollbar ${class_name}" style="${style}">`;
    // logo
    ht += `<div class="toolbar-btn toolbar-puter-logo" title="Puter" style="margin-left: 10px;"><img src="${window.icons['logo-white.svg']}" draggable="false" style="display:block; width:17px; height:17px"></div>`;

    // clock spacer
    ht += `<div class="toolbar-spacer"></div>`;

    // create account button
    ht += `<div class="toolbar-btn user-options-create-account-btn ${window.user.is_temp ? '' : 'hidden'}" style="padding:0; opacity:1;" title="${i18n('toolbar.save_account')}">`;
    ht += `<svg style="width: 17px; height: 17px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g transform="translate(0, 0)"><path d="M45.521,39.04L27.527,5.134c-1.021-1.948-3.427-2.699-5.375-1.679-.717,.376-1.303,.961-1.679,1.679L2.479,39.04c-.676,1.264-.635,2.791,.108,4.017,.716,1.207,2.017,1.946,3.42,1.943H41.993c1.403,.003,2.704-.736,3.42-1.943,.743-1.226,.784-2.753,.108-4.017ZM23.032,15h1.937c.565,0,1.017,.467,1,1.031l-.438,14c-.017,.54-.459,.969-1,.969h-1.062c-.54,0-.983-.429-1-.969l-.438-14c-.018-.564,.435-1.031,1-1.031Zm.968,25c-1.657,0-3-1.343-3-3s1.343-3,3-3,3,1.343,3,3-1.343,3-3,3Z" fill="#ffbb00"></path></g></svg>`;
    ht += `</div>`;

    // 'Show Desktop'
    ht += `<a href="/" class="show-desktop-btn toolbar-btn antialiased hidden" target="_blank" title="${i18n('desktop_show_desktop')}">${i18n('desktop_show_desktop')} <img src="${window.icons['launch-white.svg']}" style="width: 10px; height: 10px; margin-left: 5px;"></a>`;

    // refer
    if (window.user.referral_code) {
        ht += `<div class="toolbar-btn refer-btn" title="${i18n('toolbar.refer')}" style="background-image:url(${window.icons['gift.svg']});"></div>`;
    }

    // github
    ht += `<a href="https://github.com/HeyPuter/puter" target="_blank" class="toolbar-btn" title="${i18n('toolbar.github')}" style="background-image:url(${window.icons['logo-github-white.svg']});"></a>`;

    // do not show the fullscreen button on mobile devices since it's broken
    if (!isMobile.phone) {
        // fullscreen button
        ht += `<div class="toolbar-btn fullscreen-btn" title="${i18n('toolbar.enter_fullscreen')}" style="background-image:url(${window.icons['fullscreen.svg']})"></div>`;
    }

    // qr code button -- only show if not embedded
    if (!window.is_embedded)
        ht += `<div class="toolbar-btn qr-btn" title="${i18n('toolbar.qrcode')}" style="background-image:url(${window.icons['qr.svg']})"></div>`;

    // search button
    ht += `<div class="toolbar-btn search-btn" title="${i18n('toolbar.search')}" style="background-image:url('${window.icons['search.svg']}')"></div>`;

    //clock 
    ht += `<div id="clock" class="toolbar-clock" style="">12:00 AM Sun, Jan 01</div>`;

    // user options menu
    ht += `<div class="toolbar-btn user-options-menu-btn profile-pic" style="display:block;">`;
    ht += `<div class="profile-image ${window.user?.profile?.picture && 'profile-image-has-picture'}" style="border-radius: 50%; background-image:url(${window.user?.profile?.picture || window.icons['profile.svg']}); box-sizing: border-box; width: 17px !important; height: 17px !important; background-size: contain; background-repeat: no-repeat; background-position: center; background-position: center; background-size: cover;"></div>`;
    ht += `</div>`;
    ht += `</div>`;

    // prepend toolbar to desktop
    $(ht).insertBefore(el_desktop);

    // If auto-hide is disabled, ensure toolbar is visible on load
    if (!window.toolbar_auto_hide_enabled) {
        // Make sure toolbar is visible when auto-hide is disabled
        setTimeout(() => {
            if ($('.toolbar').hasClass('toolbar-hidden')) {
                window.show_toolbar();
            }
        }, 100); // Small delay to ensure DOM is ready
    }

    // send event
    window.dispatchEvent(new CustomEvent('toolbar:ready'));
    // init clock visibility
    window.change_clock_visible();

    // notification container
    $('body').append(`<div class="notification-container"><div class="notifications-close-all">${i18n('close_all')}</div></div>`);

    // adjust window container to take into account the toolbar height
    $('.window-container').css('top', window.toolbar_height);

    // track: checkpoint
    //-----------------------------
    // GUI is ready to launch apps!
    //-----------------------------
    window.dispatchEvent(new CustomEvent('desktop:ready'));
    globalThis.services.emit('gui:ready');

    //--------------------------------------------------------
    // Open the AI app
    //--------------------------------------------------------    
    if(window.user.email_confirmed){
        launch_app({
            name: 'ai',
            window_options: {
                is_panel: true,
            }
        })
    }

    //--------------------------------------------------------------------------------------
    // Determine if an app was launched from URL
    // i.e. https://puter.com/app/<app_name>
    //--------------------------------------------------------------------------------------
    if (window.url_paths[0]?.toLocaleLowerCase() === 'app' && window.url_paths[1]) {
        window.app_launched_from_url = window.url_paths[1];
        // get app metadata
        try {
            window.app_launched_from_url = await puter.apps.get(window.url_paths[1], { icon_size: 64 })
            window.is_fullpage_mode = window.app_launched_from_url.metadata?.fullpage_on_landing ?? window.is_fullpage_mode ?? false;

            // show 'Show Desktop' button
            if (window.is_fullpage_mode) {
                $('.show-desktop-btn').removeClass('hidden');
            }
        } catch (e) {
            console.error('UIDesktop app path launch error', e);
        }

        // get query params, any param that doesn't start with 'puter.' will be passed to the app
        window.app_query_params = {};
        for (let [key, value] of window.url_query_params) {
            if (!key.startsWith('puter.'))
                window.app_query_params[key] = value;
        }
    }
    //--------------------------------------------------------------------------------------
    // /settings will open settings in fullpage mode
    //--------------------------------------------------------------------------------------
    else if (window.url_paths[0]?.toLocaleLowerCase() === 'settings') {
        // open settings
        UIWindowSettings({
            tab: window.url_paths[1] || 'about',
            window_options: {
                is_fullpage: true,
            }
        });
    }
    // ---------------------------------------------
    // Run apps from insta-login URL
    // ---------------------------------------------
    if (window.url_query_params.has('app')) {
        let url_app_name = window.url_query_params.get('app');
        if (url_app_name === 'explorer') {
            let predefined_path = window.home_path;
            if (window.url_query_params.has('path'))
                predefined_path = window.url_query_params.get('path')
            // launch explorer
            UIWindow({
                path: predefined_path,
                title: path.basename(predefined_path),
                icon: await item_icon({ is_dir: true, path: predefined_path }),
                // todo
                // uid: $(el_item).attr('data-uid'),
                is_dir: true,
                // todo
                // sort_by: $(el_item).attr('data-sort_by'),
                app: 'explorer',
            });
        }
    }
    // ---------------------------------------------
    // load from direct app URLs: /app/app-name
    // ---------------------------------------------
    else if (window.app_launched_from_url) {
        if (!window.url_query_params.has('c')) {
            let posargs = undefined;
            if (window.app_query_params && window.app_query_params.posargs) {
                posargs = JSON.parse(window.app_query_params.posargs);
            }
            launch_app({
                app: window.app_launched_from_url.name,
                app_obj: window.app_launched_from_url,
                readURL: window.url_query_params.get('readURL'),
                maximized: window.url_query_params.get('maximized'),
                params: window.app_query_params ?? [],
                ...(posargs ? {
                    args: {
                        command_line: { args: posargs }
                    }
                } : {}),
                is_fullpage: window.is_fullpage_mode,
                window_options: {
                    stay_on_top: false,
                }
            });
        }
    }

    $(el_desktop).on('mousedown touchstart', { passive: true }, function (e) {
        // dimiss touchstart on regular devices
        if (e.type === 'taphold' && !isMobile.phone && !isMobile.tablet)
            return;

        // disable pointer-events for all app iframes, this is to make sure selectable works
        $('.window-app-iframe').css('pointer-events', 'none');
        $('.window').find('.item-selected').addClass('item-blurred');
        $('.desktop').find('.item-blurred').removeClass('item-blurred');
    })

    $(el_desktop).on('click', function (e) {
        // blur all windows
        $('.window-active').removeClass('window-active');
        // hide all global menubars
        $('.window-menubar-global').hide();
    })

    function display_ct() {

        var x = new Date()
        var ampm = x.getHours() >= 12 ? ' PM' : ' AM';
        let hours = x.getHours() % 12;
        hours = hours ? hours : 12;
        hours = hours.toString().length == 1 ? 0 + hours.toString() : hours;

        var minutes = x.getMinutes().toString()
        minutes = minutes.length == 1 ? 0 + minutes : minutes;

        var seconds = x.getSeconds().toString()
        seconds = seconds.length == 1 ? 0 + seconds : seconds;

        var month = x.toLocaleString('default', { month: 'short' });

        var dt = x.getDate().toString();
        dt = dt.length == 1 ? 0 + dt : dt;

        var day = x.toLocaleString('default', { weekday: 'short' });


        var x1 = day + ", " + month + " " + dt;
        x1 = hours + ":" + minutes + ampm + " " + x1;
        $('#clock').html(x1);
    }
    display_ct()
    setInterval(display_ct, 1000);

    // show referral notice window
    if (window.show_referral_notice && !window.user.email_confirmed) {
        puter.kv.get('shown_referral_notice').then(async (val) => {
            if (!val || val === 'false' || val === false) {
                setTimeout(() => {
                    UIWindowClaimReferral();
                }, 1000);
                puter.kv.set({
                    key: "shown_referral_notice",
                    value: true,
                })
            }
        })
    }

    window.hide_toolbar = (animate = true) => {
        // Always show toolbar on mobile and tablet devices
        if (isMobile.phone || isMobile.tablet) {
            return;
        }
        
        // Don't hide toolbar if auto-hide is disabled
        if (!window.toolbar_auto_hide_enabled) {
            return;
        }
        
        if ($('.toolbar').hasClass('toolbar-hidden')) return;

        // attach hidden class to toolbar
        $('.toolbar').addClass('toolbar-hidden');

        // animate the toolbar to top = -20px;
        // animate width to 40px;
        if (animate) {
            $('.toolbar').animate({
                top: '-20px',
                width: '40px',
            }, 100);
        } else {
            $('.toolbar').css({
                top: '-20px',
                width: '40px',
            });
        }
        // animate hide toolbar-btn, toolbar-clock
        if (animate) {
            $('.toolbar-btn, #clock, .user-options-menu-btn').animate({
                opacity: 0,
            }, 10);
        } else {
            $('.toolbar-btn, #clock, .user-options-menu-btn').css({
                opacity: 0,
            });
        }

        if(!window.has_seen_toolbar_animation){
            puter.kv.set({
                key: "has_seen_toolbar_animation",
                value: true,
            })

            window.has_seen_toolbar_animation = true;
        }
    }

    window.show_toolbar = () => {
        if (!$('.toolbar').hasClass('toolbar-hidden')) return;

        // remove hidden class from toolbar
        $('.toolbar').removeClass('toolbar-hidden');

        $('.toolbar').animate({
            top: 0,
        }, 100).css('width', 'max-content');

        // animate show toolbar-btn, toolbar-clock
        $('.toolbar-btn, #clock, .user-options-menu-btn').animate({
            opacity: 0.8,
        }, 50);
    }

    // Toolbar hide/show logic with improved UX
    window.toolbarHideTimeout = null;
    let isMouseNearToolbar = false;

    // Define safe zone around toolbar (in pixels)
    const TOOLBAR_SAFE_ZONE = 30;
    const TOOLBAR_HIDE_DELAY = 100; // Base delay before hiding
    const TOOLBAR_QUICK_HIDE_DELAY = 200; // Quicker hide when mouse moves far away

    // Function to check if mouse is in the safe zone around toolbar
    window.isMouseInToolbarSafeZone = (mouseX, mouseY) => {
        const toolbar = $('.toolbar')[0];
        if (!toolbar) return false;
        
        const rect = toolbar.getBoundingClientRect();
        
        // Expand the toolbar bounds by the safe zone
        const safeZone = {
            top: rect.top - TOOLBAR_SAFE_ZONE,
            bottom: rect.bottom + TOOLBAR_SAFE_ZONE,
            left: rect.left - TOOLBAR_SAFE_ZONE,
            right: rect.right + TOOLBAR_SAFE_ZONE
        };
        
        return mouseX >= safeZone.left && 
               mouseX <= safeZone.right && 
               mouseY >= safeZone.top && 
               mouseY <= safeZone.bottom;
    };

    // Function to handle toolbar hiding with improved logic
    window.handleToolbarHiding = (mouseX, mouseY) => {
        // Always show toolbar on mobile and tablet devices
        if (isMobile.phone || isMobile.tablet) {
            return;
        }
        
        // Don't hide toolbar if auto-hide is disabled
        if (!window.toolbar_auto_hide_enabled) {
            return;
        }
        
        // Clear any existing timeout
        if (window.toolbarHideTimeout) {
            clearTimeout(window.toolbarHideTimeout);
            window.toolbarHideTimeout = null;
        }
        
        // Don't hide if toolbar is already hidden
        if ($('.toolbar').hasClass('toolbar-hidden')) return;
        
        const wasNearToolbar = isMouseNearToolbar;
        isMouseNearToolbar = window.isMouseInToolbarSafeZone(mouseX, mouseY);
        
        // If mouse is in safe zone, don't hide
        if (isMouseNearToolbar) {
            return;
        }
        
        // Determine hide delay based on mouse movement pattern
        let hideDelay = TOOLBAR_HIDE_DELAY;
        
        // If mouse was previously near toolbar and now moved far away, hide quicker
        if (wasNearToolbar && !isMouseNearToolbar) {
            // Check if mouse moved significantly away
            const toolbar = $('.toolbar')[0];
            if (toolbar) {
                const rect = toolbar.getBoundingClientRect();
                const distanceFromToolbar = Math.min(
                    Math.abs(mouseY - rect.bottom),
                    Math.abs(mouseY - rect.top)
                );
                
                // If mouse is far from toolbar, hide quicker
                if (distanceFromToolbar > TOOLBAR_SAFE_ZONE * 2) {
                    hideDelay = TOOLBAR_QUICK_HIDE_DELAY;
                }
            }
        }
        
        // Set timeout to hide toolbar
        window.toolbarHideTimeout = setTimeout(() => {
            // Double-check mouse position before hiding
            if (!window.isMouseInToolbarSafeZone(window.mouseX, window.mouseY)) {
                window.hide_toolbar();
            }
            window.toolbarHideTimeout = null;
        }, hideDelay);
    };

    // debounce timer to prevent toolbar showing immediately after drag ends
    window.drag_release_debounce_timer = null;
    const DRAG_RELEASE_DEBOUNCE_MS = 300; 

    // track when drag operations end to enable debounce
    $(document).on('dragend', function() {
        window.drag_release_debounce_timer = setTimeout(() => {
            window.drag_release_debounce_timer = null;
        }, DRAG_RELEASE_DEBOUNCE_MS);
    });

    // also debounce when mouseup occurs while in drag state
    $(document).on('mouseup', function() {
        if (window.a_window_is_being_dragged || window.an_item_is_being_dragged) {
            window.drag_release_debounce_timer = setTimeout(() => {
                window.drag_release_debounce_timer = null;
            }, DRAG_RELEASE_DEBOUNCE_MS);
        }
    });

    // hovering over a hidden toolbar will show it
    $(document).on('mouseenter', '.toolbar-hidden', function () {
        // if a window is being dragged or currently in drag release debounce period, don't show the toolbar
        if(window.a_window_is_being_dragged || window.drag_release_debounce_timer !== null)
            return;

        // if selectable is active , don't show the toolbar
        if(window.desktop_selectable_is_active)
            return;

        // if an item is being dragged, don't show the toolbar
        if(window.an_item_is_being_dragged)
            return;

        if(window.is_fullpage_mode)
            $('.window-app-iframe').css('pointer-events', 'none');

        window.show_toolbar();
        // Clear any pending hide timeout
        if (window.toolbarHideTimeout) {
            clearTimeout(window.toolbarHideTimeout);
            window.toolbarHideTimeout = null;
        }
    });

    // hovering over a visible toolbar will show it and cancel hiding
    $(document).on('mouseenter', '.toolbar:not(.toolbar-hidden)', function () {
        // if a window is being dragged, don't show the toolbar
        if(window.a_window_is_being_dragged)
            return;

        // Clear any pending hide timeout when entering toolbar
        if (window.toolbarHideTimeout) {
            clearTimeout(window.toolbarHideTimeout);
            window.toolbarHideTimeout = null;
        }
        isMouseNearToolbar = true;
    });

    $(document).on('mouseenter', '.toolbar', function () {
        if(window.is_fullpage_mode)
            $('.toolbar').focus();
    });

    // any click will hide the toolbar, unless:
    // - it's on the toolbar
    // - it's the user options menu button
    // - the user options menu is open
    $(document).on('click', function(e){
        // Always show toolbar on mobile and tablet devices
        if (isMobile.phone || isMobile.tablet) {
            return;
        }
        
        // Don't hide toolbar if auto-hide is disabled
        if (!window.toolbar_auto_hide_enabled) {
            return;
        }
        
        // if the user has not seen the toolbar animation, don't hide the toolbar
        if(!window.has_seen_toolbar_animation)
            return;

        if(
            !$(e.target).hasClass('toolbar') && 
            !$(e.target).hasClass('user-options-menu-btn') && 
            $('.context-menu[data-id="user-options-menu"]').length === 0 &&
            true
        ){
            window.hide_toolbar(false);
        }
    })

    // Handle mouse leaving the toolbar
    $(document).on('mouseleave', '.toolbar', function () {
        // Always show toolbar on mobile and tablet devices
        if (isMobile.phone || isMobile.tablet) {
            return;
        }
        
        // Don't hide toolbar if auto-hide is disabled
        if (!window.toolbar_auto_hide_enabled) {
            return;
        }
        
        window.has_left_toolbar_at_least_once = true;
        // if the user options menu is open, don't hide the toolbar
        if ($('.context-menu[data-id="user-options-menu"]').length > 0)
            return;
    
        // Start the hiding logic with current mouse position
        window.handleToolbarHiding(window.mouseX, window.mouseY);
    });

    // Track mouse movement globally to update toolbar hiding logic
    $(document).on('mousemove', function(e) {
        // Always show toolbar on mobile and tablet devices
        if (isMobile.phone || isMobile.tablet) {
            return;
        }
        
        // Don't hide toolbar if auto-hide is disabled
        if (!window.toolbar_auto_hide_enabled) {
            return;
        }
        
        // if the user has not seen the toolbar animation, don't hide the toolbar
        if(!window.has_seen_toolbar_animation && !window.has_left_toolbar_at_least_once)
            return;

        // if the user options menu is open, don't hide the toolbar
        if ($('.context-menu[data-id="user-options-menu"]').length > 0)
            return;

        // Only handle toolbar hiding if toolbar is visible and mouse moved significantly
        if (!$('.toolbar').hasClass('toolbar-hidden')) {
            // Use throttling to avoid excessive calls
            if (!window.mouseMoveThrottle) {
                window.mouseMoveThrottle = setTimeout(() => {
                    window.handleToolbarHiding(window.mouseX, window.mouseY);
                    window.mouseMoveThrottle = null;
                }, 100); // Throttle to every 100ms
            }
        }
    });

    //--------------------------------------------------------------------------------------
    // Trying to view a user's public folder?
    // i.e. https://puter.com/@<username>
    //--------------------------------------------------------------------------------------
    const url_paths = window.location.pathname.split('/').filter(element => element);
    if (window.url_paths[0]?.startsWith('@')) {
        const username = window.url_paths[0].substring(1);
        let item_path = '/' + username + '/Public';
        if ( window.url_paths.length > 1 ) {
            item_path += '/' + window.url_paths.slice(1).join('/');
        }

        // GUARD: avoid invalid user directories
        {
            if (!username.match(/^[a-z0-9_]+$/i)) {
                UIAlert({
                    message: i18n('error_invalid_username')
                });
                return;
            }
        }

        let stat;
        try {
          stat = await puter.fs.stat({path: item_path, consistency: 'eventual'});
        } catch ( e ) {
            window.history.replaceState(null, document.title, '/');
            UIAlert({
                message: i18n('error_user_or_path_not_found'),
                type: 'error'
            });
            return;
        }

        // TODO: DRY everything here with open_item. Unfortunately we can't
        //       use open_item here because it's coupled with UI logic;
        //       it requires a UIItem element and cannot operate on a
        //       file path on its own.
        if ( ! stat.is_dir ) {
            if ( stat.associated_app ) {
                launch_app({ name: stat.associated_app.name });
                return;
            }
            
            const ext_pref =
                window.user_preferences[`default_apps${path.extname(item_path).toLowerCase()}`];
            
            if ( ext_pref ) {
                launch_app({
                    name: ext_pref,
                    file_path: item_path,
                });
                return;
            }
            

            const open_item_meta = await $.ajax({
                url: window.api_origin + "/open_item",
                type: 'POST',
                contentType: "application/json",
                data: JSON.stringify({
                    path: item_path,
                }),
                headers: {
                    "Authorization": "Bearer "+window.auth_token
                },
                statusCode: {
                    401: function () {
                        window.logout();
                    },
                },
            });
            const suggested_apps = open_item_meta?.suggested_apps ?? await window.suggest_apps_for_fsentry({
                path: item_path
            });

            // Note: I'm not adding unzipping logic here. We'll wait until
            //       we've refactored open_item so that Puter can have a
            //       properly-reusable open function.
            if ( suggested_apps.length !== 0 ) {
                launch_app({
                    name: suggested_apps[0].name, 
                    token: open_item_meta.token,
                    file_path: item_path,
                    app_obj: suggested_apps[0],
                    window_title: path.basename(item_path),
                    maximized: options.maximized,
                    file_signature: open_item_meta.signature,
                    custom_path: window.location.pathname,
                });
                return;
            }

            await UIAlert({
                message: 'Cannot find an app to open this file; ' +
                    'opening directory instead.'
            });
            item_path = item_path.split('/').slice(0, -1).join('/')
        }

        UIWindow({
            path: item_path,
            title: path.basename(item_path),
            icon: await item_icon({ is_dir: true, path: item_path }),
            is_dir: true,
            app: 'explorer',
        });
    }

    //--------------------------------------------------------------------------------------
    // Direct download link
    // i.e. https://puter.com/?download=<file_url>
    //--------------------------------------------------------------------------------------
    if (window.url_paths.length === 0 && window.url_query_params.has('download')) {
        const url = window.url_query_params.get('download');
        let file_name = url.split('/').pop().split('?')[0];

        let response = await UIAlert({
            message: i18n('confirm_download_file_to_desktop', file_name),
            type: 'confirm',
            buttons: [
                { label: i18n('alert_yes'), value: true, type: "primary" },
                { label: i18n('alert_no'), value: false, type: "secondary" }
            ],
        });

        if (!response)
            return;

        

        let cancelled = false;
        let upload_xhr = null;
        const abort_controller = new AbortController();
        
        // create progressbar dialog
        let progwin = await UIWindowProgress({
            title: i18n('downloading'),
            icon: window.icons[`app-icon-uploader.svg`],
            operation_id: window.uuidv4(),
            show_progress: true,
            on_cancel: () => {
                cancelled = true;
                abort_controller.abort();
                if (upload_xhr) {
                    upload_xhr.abort();
                }
            }
        });
        progwin?.set_status(i18n('downloading_file', file_name));

        (async () => {
            try {
                // download the file
                const response = await puter.net.fetch(url, {
                    signal: abort_controller.signal,
                });

                const total = Number(response.headers.get('content-length'));
                const reader = response.body.getReader();
                
                const chunks = [];
                let received = 0;

                while (true) {
                    const { done, value } = await reader.read();
                    if (done || cancelled) break;

                    if (value) {
                        // store the chunk
                        chunks.push(value);
                        received += value.length;
                        // calculate progress
                        const progress = Number.isFinite(total) && total > 0
                            ? received / total
                            : 0;
                        // update progressbar
                        progwin?.set_progress(Math.floor(progress * 100));
                    }
                }

                if (cancelled) {
                    progwin?.close();
                    return;
                }

                // combine chunks into a blob
                let blob = new Blob(chunks, {
                    type: response.headers.get('content-type') ?? 'application/octet-stream',
                });
                
                // reset progressbar
                progwin?.set_progress(0);
                progwin?.set_status(i18n('uploading_file', file_name));

                // upload to user's desktop
                await puter.fs.write(`~/Desktop/${file_name}`, blob, {
                    dedupeName: true,
                    progress: (_, percent) => {
                        // update progressbar
                        progwin?.set_progress(percent);
                    },
                    init: (_, xhr) => {
                        upload_xhr = xhr;
                    }
                });
            } catch (e) {
                // alert the user if there's a genuine error
                if (!cancelled && e.name !== 'AbortError') {
                    await UIAlert({
                        message: i18n('error_download_failed') + ': ' + e.message,
                        type: 'error',
                    });
                }
            }
            // close progress window
            progwin?.close();
        })();
    }
}

$(document).on('contextmenu taphold', '.taskbar', function (event) {
    // dismiss taphold on regular devices
    if (event.type === 'taphold' && !isMobile.phone && !isMobile.tablet)
        return;

    event.preventDefault();
    event.stopPropagation();
    
    // Get current taskbar position
    const currentPosition = window.taskbar_position || 'bottom';
    
    // Create base menu items
    let menuItems = [];
    
    // Only show position submenu on desktop devices
    if (!isMobile.phone && !isMobile.tablet) {
        menuItems.push({
            html: i18n('desktop_position'),
            items: [
                {
                    html: i18n('desktop_position_left'),
                    checked: currentPosition === 'left',
                    onClick: function() {
                        window.update_taskbar_position('left');
                    }
                },
                {
                    html: i18n('desktop_position_bottom'),
                    checked: currentPosition === 'bottom',
                    onClick: function() {
                        window.update_taskbar_position('bottom');
                    }
                },
                {
                    html: i18n('desktop_position_right'),
                    checked: currentPosition === 'right',
                    onClick: function() {
                        window.update_taskbar_position('right');
                    }
                }
            ]
        });
        menuItems.push('-'); // divider
    }
    
    // Add the "Show open windows" option for all devices
    menuItems.push({
        html: i18n('desktop_show_open_windows'),
        onClick: function () {
            $(`.window`).showWindow();
        }
    });
    
    // Add the "Show the desktop" option for all devices
    menuItems.push({
        html: i18n('desktop_show_desktop'),
        onClick: function () {
            $(`.window`).hideWindow();
        }
    });
    
    UIContextMenu({
        parent_element: $('.taskbar'),
        items: menuItems
    });
    return false;
});

// Toolbar context menu
$(document).on('contextmenu taphold', '.toolbar', function (event) {
    // dismiss taphold on regular devices
    if (event.type === 'taphold' && !isMobile.phone && !isMobile.tablet)
        return;

    // Don't show context menu on mobile devices since toolbar auto-hide is disabled there
    if (isMobile.phone || isMobile.tablet)
        return;

    event.preventDefault();
    event.stopPropagation();
        
    UIContextMenu({
        parent_element: $('.toolbar'),
        items: [
            //--------------------------------------------------
            // Enable/Disable Auto-hide
            //--------------------------------------------------
            {
                html: window.toolbar_auto_hide_enabled ? i18n('Disable Auto-hide') : i18n('Enable Auto-hide'),
                onClick: function () {
                    // Toggle the preference
                    window.toolbar_auto_hide_enabled = !window.toolbar_auto_hide_enabled;
                    
                    // Save the preference
                    puter.kv.set('toolbar_auto_hide_enabled', window.toolbar_auto_hide_enabled.toString());
                    
                    // If auto-hide was just disabled and toolbar is currently hidden, show it
                    if (!window.toolbar_auto_hide_enabled && $('.toolbar').hasClass('toolbar-hidden')) {
                        window.show_toolbar();
                    }
                    
                    // Clear any pending hide timeout
                    if (window.toolbarHideTimeout) {
                        clearTimeout(window.toolbarHideTimeout);
                        window.toolbarHideTimeout = null;
                    }

                    // hide toolbar
                    window.hide_toolbar();
                }
            }
        ]
    });
    return false;
});

$(document).on('click', '.qr-btn', async function (e) {
    UIWindowQR({
        message_i18n_key: 'scan_qr_c2a',
        text: window.gui_origin + '?auth_token=' + window.auth_token,
    });
})

$(document).on('click', '.user-options-menu-btn', async function (e) {
    const pos = this.getBoundingClientRect();
    if ($('.context-menu[data-id="user-options-menu"]').length > 0)
        return;

    let items = [];
    let parent_element = this;
    //--------------------------------------------------
    // Save Session
    //--------------------------------------------------
    if (window.user.is_temp) {
        items.push(
            {
                html: i18n('save_session'),
                icon: `<svg style="margin-bottom: -4px; width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g transform="translate(0, 0)"><path d="M45.521,39.04L27.527,5.134c-1.021-1.948-3.427-2.699-5.375-1.679-.717,.376-1.303,.961-1.679,1.679L2.479,39.04c-.676,1.264-.635,2.791,.108,4.017,.716,1.207,2.017,1.946,3.42,1.943H41.993c1.403,.003,2.704-.736,3.42-1.943,.743-1.226,.784-2.753,.108-4.017ZM23.032,15h1.937c.565,0,1.017,.467,1,1.031l-.438,14c-.017,.54-.459,.969-1,.969h-1.062c-.54,0-.983-.429-1-.969l-.438-14c-.018-.564,.435-1.031,1-1.031Zm.968,25c-1.657,0-3-1.343-3-3s1.343-3,3-3,3,1.343,3,3-1.343,3-3,3Z" fill="#ffbb00"></path></g></svg>`,
                icon_active: `<svg style="margin-bottom: -4px; width: 16px; height: 16px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g transform="translate(0, 0)"><path d="M45.521,39.04L27.527,5.134c-1.021-1.948-3.427-2.699-5.375-1.679-.717,.376-1.303,.961-1.679,1.679L2.479,39.04c-.676,1.264-.635,2.791,.108,4.017,.716,1.207,2.017,1.946,3.42,1.943H41.993c1.403,.003,2.704-.736,3.42-1.943,.743-1.226,.784-2.753,.108-4.017ZM23.032,15h1.937c.565,0,1.017,.467,1,1.031l-.438,14c-.017,.54-.459,.969-1,.969h-1.062c-.54,0-.983-.429-1-.969l-.438-14c-.018-.564,.435-1.031,1-1.031Zm.968,25c-1.657,0-3-1.343-3-3s1.343-3,3-3,3,1.343,3,3-1.343,3-3,3Z" fill="#ffbb00"></path></g></svg>`,
                onClick: async function () {
                    UIWindowSaveAccount({
                        send_confirmation_code: false,
                        default_username: window.user.username
                    });
                }
            },
        )
        // -------------------------------------------
        // -
        // -------------------------------------------
        items.push('-')
    }

    // -------------------------------------------
    // Logged in users
    // -------------------------------------------
    if (window.logged_in_users.length > 0) {
        let users_arr = window.logged_in_users;

        // bring logged in user's item to top
        users_arr.sort(function (x, y) { return x.uuid === window.user.uuid ? -1 : y.uuid == window.user.uuid ? 1 : 0; });

        // create menu items
        users_arr.forEach(l_user => {
            items.push(
                {
                    html: l_user.username,
                    icon: l_user.username === window.user.username ? '✓' : '',
                    onClick: async function (val) {
                        // don't reload everything if clicked on already-logged-in user
                        if (l_user.username === window.user.username)
                            return;
                        // update auth data
                        window.update_auth_data(l_user.auth_token, l_user);
                        // refresh
                        location.reload();
                    }

                },
            )
        });
        // -------------------------------------------
        // -
        // -------------------------------------------
        items.push('-')

        items.push(
            {
                html: i18n('add_existing_account'),
                // icon: l_user.username === user.username ? '✓' : '',
                onClick: async function (val) {
                    await UIWindowLogin({
                        reload_on_success: true,
                        send_confirmation_code: false,
                        window_options: {
                            has_head: true
                        }
                    });
                }
            },
        )

        // -------------------------------------------
        // -
        // -------------------------------------------
        items.push('-')

    }

    // -------------------------------------------
    // Load available languages
    // -------------------------------------------
    const supportedLanguagesItems = window.listSupportedLanguages().map(lang => {
        return {
            html: lang.name,
            icon: window.locale === lang.code ? '✓' : '',
            onClick: async function () {
                changeLanguage(lang.code);
            }
        }
    });

    UIContextMenu({
        id: 'user-options-menu',
        parent_element: parent_element,
        position: { top: pos.top + 28, left: pos.left + pos.width - 15 },
        items: [
            ...items,
            //--------------------------------------------------
            // Settings
            //--------------------------------------------------
            {
                html: i18n('settings'),
                id: 'settings',
                onClick: async function () {
                    UIWindowSettings();
                }
            },
            //--------------------------------------------------
            // My Websites
            //--------------------------------------------------
            {
                html: i18n('my_websites'),
                id: 'my_websites',
                onClick: async function () {
                    UIWindowMyWebsites();
                }
            },
            //--------------------------------------------------
            // Task Manager
            //--------------------------------------------------
            {
                html: i18n('task_manager'),
                id: 'task_manager',
                onClick: async function () {
                    UIWindowTaskManager();
                }
            },
            //--------------------------------------------------
            // Contact Us
            //--------------------------------------------------
            {
                html: i18n('contact_us'),
                id: 'contact_us',
                onClick: async function () {
                    UIWindowFeedback();
                }
            },
            // -------------------------------------------
            // -
            // -------------------------------------------
            '-',

            //--------------------------------------------------
            // Log Out
            //--------------------------------------------------
            {
                html: i18n('log_out'),
                onClick: async function () {
                    // see if there are any open windows, if yes notify user
                    if ($('.window-app').length > 0) {
                        const alert_resp = await UIAlert({
                            message: `<p>${i18n('confirm_open_apps_log_out')}</p>`,
                            buttons: [
                                {
                                    label: i18n('close_all_windows_and_log_out'),
                                    value: 'close_and_log_out',
                                    type: 'primary',
                                },
                                {
                                    label: i18n('cancel')
                                },
                            ]
                        })
                        if (alert_resp === 'close_and_log_out')
                            window.logout();
                    }
                    // no open windows
                    else
                        window.logout();
                }
            },
        ]
    });
})

$(document).on('click', '.fullscreen-btn', async function (e) {
    if (!window.is_fullscreen()) {
        var elem = document.documentElement;
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.webkitRequestFullscreen) { /* Safari */
            elem.webkitRequestFullscreen();
        } else if (elem.mozRequestFullScreen) { /* moz */
            elem.mozRequestFullScreen();
        } else if (elem.msRequestFullscreen) { /* IE11 */
            elem.msRequestFullscreen();
        }
    }
    else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
})

$(document).on('click', '.close-launch-popover', function () {
    $(".launch-popover").closest('.popover').fadeOut(200, function () {
        $(".launch-popover").closest('.popover').remove();
    });
});

$(document).on('click', '.search-btn', function () {
    UIWindowSearch();
})

$(document).on('click', '.toolbar-puter-logo', function () {
    UIWindowSettings();
})

$(document).on('click', '.user-options-create-account-btn', async function (e) {
    UIWindowSaveAccount({
        send_confirmation_code: false,
        default_username: window.user.username,
    });
})

$(document).on('click', '.refer-btn', async function (e) {
    UIWindowRefer();
})

$(document).on('click', '.start-app', async function (e) {
    launch_app({
        name: $(this).attr('data-app-name')
    })
    // close popovers
    $(".popover").fadeOut(200, function () {
        $(".popover").remove();
    });
    $(".context-menu").fadeOut(200, function(){
        $(this).remove();
    });
})

$(document).on('click', '.user-options-login-btn', async function (e) {
    const alert_resp = await UIAlert({
        message: `<strong>Save session before exiting!</strong><p>You are in a temporary session and logging into another account will erase all data in your current session.</p>`,
        buttons: [
            {
                label: i18n('save_session'),
                value: 'save-session',
                type: 'primary',
            },
            {
                label: i18n('log_into_another_account_anyway'),
                value: 'login',
            },
            {
                label: i18n('cancel')
            },
        ]
    })

    if (alert_resp === 'save-session') {
        let saved = await UIWindowSaveAccount({
            send_confirmation_code: false,
        });
        if (saved)
            UIWindowLogin({ show_signup_button: false, reload_on_success: true });
    } else if (alert_resp === 'login') {
        UIWindowLogin({
            show_signup_button: false,
            reload_on_success: true,
            window_options: {
                backdrop: true,
                close_on_backdrop_click: false,
            }
        });
    }
})

$(document).on('click mousedown', '.launch-search, .launch-popover', function (e) {
    $(this).focus();
    e.stopPropagation();
    e.preventDefault();
    // don't let click bubble up to window
    e.stopImmediatePropagation();
})

$(document).on('focus', '.launch-search', function (e) {
    // remove all selected items in start menu
    $('.launch-app-selected').removeClass('launch-app-selected');
    // scroll popover to top
    $('.launch-popover').scrollTop(0);
})

$(document).on('change keyup keypress keydown paste', '.launch-search', function (e) {
    // search window.launch_apps.recommended for query
    const query = $(this).val().toLowerCase();
    if (query === '') {
        $('.launch-search-clear').hide();
        $(`.start-app-card`).show();
        $('.launch-apps-recent').show();
        $('.start-section-heading').show();
    } else {
        $('.launch-apps-recent').hide();
        $('.start-section-heading').hide();
        $('.launch-search-clear').show();
        window.launch_apps.recommended.forEach((app) => {
            if (app.title.toLowerCase().includes(query.toLowerCase())) {
                $(`.start-app-card[data-name="${app.name}"]`).show();
            } else {
                $(`.start-app-card[data-name="${app.name}"]`).hide();
            }
        })
    }
})

$(document).on('click', '.launch-search-clear', function (e) {
    $('.launch-search').val('');
    $('.launch-search').trigger('change');
    $('.launch-search').focus();
})

document.addEventListener('fullscreenchange', (event) => {
    // document.fullscreenElement will point to the element that
    // is in fullscreen mode if there is one. If there isn't one,
    // the value of the property is null.

    if (document.fullscreenElement) {
        $('.fullscreen-btn').css('background-image', `url(${window.icons['shrink.svg']})`);
        $('.fullscreen-btn').attr('title', i18n('desktop_exit_full_screen'));
        window.user_preferences.clock_visible === 'auto' && $('#clock').show();
    } else {
        $('.fullscreen-btn').css('background-image', `url(${window.icons['fullscreen.svg']})`);
        $('.fullscreen-btn').attr('title', i18n('desktop_enter_full_screen'));
        window.user_preferences.clock_visible === 'auto' && $('#clock').hide();
    }
})

window.set_desktop_background = function (options) {
    if (options.fit) {
        let fit = options.fit;
        if (fit === 'cover' || fit === 'contain') {
            $('body').css('background-size', fit);
            $('body').css('background-repeat', `no-repeat`);
            $('body').css('background-position', `center center`);
        }
        else if (fit === 'center') {
            $('body').css('background-size', 'auto');
            $('body').css('background-repeat', `no-repeat`);
            $('body').css('background-position', `center center`);
        }

        else if (fit === 'repeat') {
            $('body').css('background-size', `auto`);
            $('body').css('background-repeat', `repeat`);
        }
        window.desktop_bg_fit = fit;
    }

    if (options.url) {
        $('body').css('background-image', `url(${options.url})`);
        window.desktop_bg_url = options.url;
        window.desktop_bg_color = undefined;
    }
    else if (options.color) {
        $('body').css({
            'background-image': `none`,
            'background-color': options.color,
        });
        window.desktop_bg_color = options.color;
        window.desktop_bg_url = undefined;
    }
}

window.update_taskbar = function () {
    let items = []
    $('.taskbar-item-sortable[data-keep-in-taskbar="true"]').each(function (index) {
        items.push({
            name: $(this).attr('data-app'),
            type: 'app',
        })
    })

    // update taskbar in the server-side
    $.ajax({
        url: window.api_origin + "/update-taskbar-items",
        type: 'POST',
        data: JSON.stringify({
            items: items,
        }),
        async: true,
        contentType: "application/json",
        headers: {
            "Authorization": "Bearer " + window.auth_token
        },
    })
}

window.remove_taskbar_item = function (item) {
    $(item).find('*').fadeOut(100, function () { });

    $(item).animate({ width: 0 }, 200, function () {
        $(item).remove();
        
        // Adjust taskbar item sizes after removing an item
        if (window.adjust_taskbar_item_sizes) {
            setTimeout(() => {
                window.adjust_taskbar_item_sizes();
            }, 10);
        }
    })
}

window.enter_fullpage_mode = (el_window) => {
    $('.taskbar').hide();
    $(el_window).find('.window-head').hide();
    $('body').addClass('fullpage-mode');
    $(el_window).css({
        width: '100%',
        height: '100%',
        top: window.toolbar_height + 'px',
        left: 0,
        'border-radius': 0,
    });
}

window.exit_fullpage_mode = (el_window) => {
    $('body').removeClass('fullpage-mode');
    window.taskbar_height = window.default_taskbar_height;
    $('.taskbar').css('height', window.taskbar_height);
    $('.taskbar').show();
    refresh_item_container($('.desktop.item-container'), { fadeInItems: true });
    $(el_window).removeAttr('data-is_fullpage');
    if (el_window) {
        window.reset_window_size_and_position(el_window)
        $(el_window).find('.window-head').show();
    }

    // reset dektop height to take into account the taskbar height
    $('.desktop').css('height', `calc(100vh - ${window.taskbar_height + window.toolbar_height}px)`);

    // hide the 'Show Desktop' button in toolbar
    $('.show-desktop-btn').hide();

    // refresh desktop background
    window.refresh_desktop_background();
}

window.reset_window_size_and_position = (el_window) => {
    $(el_window).css({
        width: 680,
        height: 380,
        'border-radius': window.window_border_radius,
        top: 'calc(50% - 190px)',
        left: 'calc(50% - 340px)',
    });
}

// Modify the hide/show functions to use CSS rules that will apply to all icons, including future ones
window.hideDesktopIcons = function () {
    $('.desktop.item-container').addClass('desktop-icons-hidden');
};

window.showDesktopIcons = function () {
    $('.desktop.item-container').removeClass('desktop-icons-hidden');
};

// Add this function to the global scope
window.toggleDesktopIcons = function () {
    window.desktop_icons_hidden = !window.desktop_icons_hidden;

    if (window.desktop_icons_hidden) {
        hideDesktopIcons();
    } else {
        showDesktopIcons();
    }

    // Save preference
    puter.kv.set('desktop_icons_hidden', window.desktop_icons_hidden.toString());
};

$(document).on('click', '.btn-show-ai', function () {
    $('.window[data-app="ai"]').makeWindowVisible();
});

export default UIDesktop;